<template>
  <div>
    <!-- 模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      ><p class="money">请付款{{ money }}元</p>
      <p class="message">温馨提示:付款并不会发货哦</p>
      <img
        class="img"
        src="https://pic.imgdb.cn/item/61dec26d2ab3f51d91a0ea61.jpg"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <h3 v-show="!length">购入车空空如也.快去买买买吧</h3>
    <!-- 购物车 -->
    <div class="car" v-show="length">
      <h3>
        购物车<span>￥:{{ money }}</span>
        <el-button type="warning" class="buy" @click="givememoney"
          >结算</el-button
        >
      </h3>
      全选 <input v-model="cek" @click="allcek()" type="checkbox" />
      <div class="list" v-for="item in list" :key="item.goods_id">
        <input v-model="item.is_promote" type="checkbox" name="" id="" />
        <img
          @click="godetail(item.goods_id)"
          :src="item.goods_small_logo"
          alt=""
        />
        <span class="name">{{ item.goods_name }}</span>
        <el-input-number
          class="num"
          v-model="item.hot_mumber"
          size="mini"
          :min="1"
          :max="10"
        ></el-input-number>
        <span class="price">￥:{{ item.goods_price * item.hot_mumber }}</span>
      </div>
      <el-button class="remove" @click="remove" type="danger">删除</el-button>
    </div>
  </div>
</template>

<script>
import { detail } from "../request/goods/goods";
export default {
  name: "VueCart",

  data() {
    return {
      list: [],
      length: false,
      allbuy: false,
      dialogVisible: false,
    };
  },

  mounted() {
    this.init();
  },
  computed: {
    money() {
      return this.list.reduce((a, b) => {
        if (b.is_promote) {
          a += b.goods_price * b.hot_mumber;
        }
        return a;
      }, 0);
    },
    cek: {
      get() {
        this.allbuy = this.list.every((item) => item.is_promote);
        return this.allbuy;
      },
      set(e) {},
    },
  },
  methods: {
    givememoney() {
      if (!this.money) {
        this.$message.error("清先勾选商品");
      } else {
        this.dialogVisible = true;
      }
    },
    //全选
    allcek() {
      this.list.forEach((item) => {
        item.is_promote = !this.allbuy;
      });
    },
    //删除
    remove() {
      var a = this.list.reduce((a, b) => {
        if (b.is_promote) {
          a.push(b.goods_id);
        }
        return a;
      }, []);
      if (a.length == 0) return this.$message.error("请勾选删除商品");
      const confirm = window.confirm("你确定要删除吗?");
      if (confirm) {
        var arr = sessionStorage.getItem("id").split(",");
        for (let i = 0; i < a.length; i++) {
          arr = arr.filter((n) => n != a[i]);
        }
        sessionStorage.setItem("id", arr);
        this.$router.go(0);
      } else {
        next(false);
      }
    },
    init() {
      if (sessionStorage.getItem("id")) {
        var str = sessionStorage.getItem("id");
        var arr = str.split(",").slice(0, -1);
        for (var i = 0; i < arr.length; i++) {
          detail({ goods_id: arr[i] })
            .then((res) => {
              this.list.push(res.message);
              this.list.length == 0
                ? (this.length = false)
                : (this.length = true);
            })
            .catch((err) => {});
        }
      }
    },
    //去详情
    godetail(id) {
      this.$router.push({
        path: "/detail",
        query: { id: id },
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  beforeRouteLeave(to, from, next) {
    if (this.length) {
      const confirm = window.confirm("你还没有付款,确定要离开吗?");
      if (confirm) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
};
</script>

<style  scoped>
h3 {
  text-align: center;
}
.img {
  width: 400px;
  /* height: 460px; */
  display: block;
  margin: auto;
}
.money {
  text-align: center;
  color: #f0f;
  font-size: 25px;
}
.message {
  text-align: right;
  font-size: 12px;
  color: #e0e0e0;
}
.list {
  border: 1px solid #a9a9a9;
  padding: 10px 5px;
  background: #e5e5e5;
  margin-top: 20px;
}
.list img {
  width: 100px;
  height: 100px;
  vertical-align: middle;
  margin-left: 20px;
}
.list .name {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #3c3c3c;
  font-size: 12px;
  margin-left: 10px;
  vertical-align: middle;
}
.list .price {
  color: #f00;
  font-size: 20px;
  vertical-align: middle;
  margin-left: 50px;
}
.list .num {
  margin-left: 100px;
  vertical-align: middle;
}
.buy {
  margin-left: 20px;
}
.remove {
  display: block;
  margin: 20px auto 100px;
}
</style>